<template>
  <div class="company-page">
    <TitleBar title="企业专页" bgColor="#FFFFFF" color="#333333"></TitleBar>
    <div class="top-banner"></div>
    <div class="top-three-bg" v-if="ranking<4"></div>
    <div class="ranking-num-bg" :class="{'one':ranking==1,'two':ranking==2,'three':ranking==3}" v-if="ranking<4"></div>
    <div class="four-to-ten" :class="{'four':ranking==4,'five':ranking==5,'six':ranking==6,'seven':ranking==7,'eight':ranking==8,'nine':ranking==9,'ten':ranking==10}" v-else-if="ranking<11"></div>
    <div class="large-ten" v-else>第<span>{{ranking}}</span>名</div>
    <div class="company-content" :class="{'second-top': ranking>3&&ranking<11, 'third-top':ranking>10}">
      <div class="ranking-title" :class="{'ranking-title-top':ranking>10}">
        <div class="title-bg title-left-bg" :class="{'large-ten-left-bg':ranking>10}"></div>
        <div class="title-bg title-right-bg" :class="{'large-ten-right-bg':ranking>10}"></div>
      </div>
      <div class="company-center-box">
        <div class="company-name">{{companyName}}</div>
        <div class="logo-vote-box">
          <div class="logo" :style="{'background-image':'url('+img+')'}"></div>
          <div class="vote" v-if="voteShow">
            <div class="vote-text">投票数：</div>
            <div class="vote-num">{{votes}}</div>
          </div>
        </div>
        <div class="company-info-item">
          <span class="company-info-name">品牌行业:</span>
          <span class="company-info-content">{{industry}}</span>
        </div>
        <div class="company-info-item">
          <span class="company-info-name">企业网址:</span>
          <span class="company-info-content">{{site}}</span>
        </div>
        <div class="company-info-item">
          <span class="company-info-name">企业名称:</span>
          <span class="company-info-content">{{wholeName}}</span>
        </div>
        <div class="company-info-item">
          <span class="company-info-name">企业地址:</span>
          <span class="company-info-content-2">{{address}}</span>
        </div>
        <img src="./assets/generate-icon.png" class="generate-icon" @click="cardShow=true">
        <div class="ranking-bg">{{ranking}}</div>
      </div>
    </div>
    <div class="go-vote" @click="goBack">
      <img src="./assets/go-vote-icon.png" alt="">
    </div>
    <div class="company-footer">
      <div class="company-qrcode">
        <img :src="qrcode" alt="" />
      </div>
      <div class="share-tip">
        <p v-for="(item, index) in codeText" :key="index">{{item}}</p>
      </div>
    </div>
    <vodal :width="100" :height="100" measure="%" :show="cardShow" :closeButton="false">
      <div class="brand-card-box">
        <div class="close-box">
          <img src="./assets/card-close.png" class="card-close" @click="cardShow=false">
        </div>
        <img src="" class="card-img">
        <div class="card-tips">长按图片保存至相册</div>
      </div>
    </vodal>
  </div>
</template>
<script>
import TitleBar from '../../components/TitleBar'
import consts from '../../common/consts'
import "../../common/php"
export default {
  components: {
    TitleBar
  },
  data() {
    return {
      ranking: '',
      votes: '',
      img: '',
      companyName: '',
      industry: '',
      site: '',
      wholeName: '',
      address: '',
      introduce: '',
      qrcode: '',
      codeText: [],
      isPhoneWx: false,
      categoryStatus: -1,
      cardShow: false
    }
  },
  computed: {
    voteShow() {
      return this.categoryStatus !== 3 && this.categoryStatus !== 4 && this.isPhoneWx
    }
  },
  mounted() {
    if (window.sessionStorage.getItem('categoryStatus')) {
      this.categoryStatus = parseInt(JSON.parse(window.sessionStorage.getItem('categoryStatus')))
    }
    this.isPhoneWx = this.$getDeviceInfo().isWeiXin && this.$getDeviceInfo().isPhone
    // this.$showLoading()
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$api.getBrandDetail(this.$route.query.catid, {
        itemid: this.$route.params.itemid
      }).then(data => {
        if (parseInt(data.data.status) === 1) {
          this.$hideLoading()
          const info = data.data.info
          this.ranking = info.ranking
          this.votes = info.vote_count
          this.img = info.thumb
          this.companyName = info.title
          this.industry = info.catname
          this.site = info.homepage
          this.wholeName = info.gongsi
          this.address = info.dizhi
          this.getCodeUrl(data.data.brand_ewm_link)
          this.codeText = data.data.brand_ewm_text
        } else {
          this.$toast.center(data.data.msg)
        }
      }).catch(err => {
        this.$hideLoading()
        console.log(err)
      })
    },
    getCodeUrl(str) {
      this.qrcode = str
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>
<style lang='scss' scoped>
.company-page {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    90deg,
    rgba(204, 156, 81, 1) 0%,
    rgba(231, 209, 111, 1) 100%
  );
  overflow: hidden;
  .top-banner {
    width: 100%;
    height: 3.6rem;
    background: url("./assets/top-banner.png") center no-repeat;
    background-size: cover;
  }
  .top-three-bg {
    width: 3.38rem;
    height: 3.5rem;
    background: url("./assets/top-three-bg.png") center no-repeat;
    background-size: cover;
    position: absolute;
    top: 1.12rem;
    left: 0;
    right: 0;
    margin: auto;
  }
  .ranking-num-bg {
    width: 3.38rem;
    height: 2.3rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 1.12rem;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
  }
  .one {
    background-image: url("./assets/one.png");
  }
  .two {
    background-image: url("./assets/two.png");
  }
  .three {
    background-image: url("./assets/three.png");
  }
  .four-to-ten {
    width: 1.08rem;
    height: 1.09rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 1.16rem;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
  }
  .four {
    background-image: url("./assets/four.png");
  }
  .five {
    background-image: url("./assets/five.png");
  }
  .six {
    background-image: url("./assets/six.png");
  }
  .seven {
    background-image: url("./assets/seven.png");
  }
  .eight {
    background-image: url("./assets/eight.png");
  }
  .nine {
    background-image: url("./assets/nine.png");
  }
  .ten {
    background-image: url("./assets/ten.png");
  }
  .large-ten {
    width: 1.8rem;
    height: 0.5rem;
    text-align: center;
    background-color: #fff;
    position: absolute;
    top: 1.65rem;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    font-size: 0.3rem;
    line-height: 1;
    color: rgba(194, 194, 194, 1);
    span {
      font-size: 0.56rem;
      line-height: 1;
      color: #d6ac5e;
      margin: 0 0.04rem;
    }
  }
  .ranking-bg {
    font-size: 3rem;
    line-height: 1;
    font-weight: bold;
    color: rgba(196, 183, 124, 0.15);
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    z-index: 1;
    margin: auto;
  }
  .company-content {
    width: 6.9rem;
    // height: 100%;
    border-radius: 0.2rem 0.2rem 0 0;
    background: #fff url("./assets/content-bg.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 2.15rem;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    .ranking-title {
      margin-top: 0.28rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .title-bg {
        width: 2.8rem;
        height: 0.28rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .title-left-bg {
        margin-right: 0.35rem;
        background-image: url("./assets/title-left-bg.png");
      }
      .title-right-bg {
        margin-left: 0.35rem;
        background-image: url("./assets/title-right-bg.png");
      }
      .large-ten-left-bg {
        width: 2.08rem;
        height: 0.21rem;
        margin-right: 1.1rem;
        background-image: url("./assets/large-ten-left-bg.png");
      }
      .large-ten-right-bg {
        width: 2.08rem;
        height: 0.21rem;
        margin-left: 1.1rem;
        background-image: url("./assets/large-ten-right-bg.png");
      }
    }
    .ranking-title-top {
      margin-top: 0.71rem;
    }
    .company-center-box {
      width: 6.9rem;
      position: absolute;
      top: 1.08rem;
      left: 0;
      right: 0;
      bottom: 2.4rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .company-name {
      width: 5.1rem;
      font-size: 0.32rem;
      font-weight: bold;
      color: #333333;
      margin: 0 auto;
      text-align: center;
    }
    .logo-vote-box {
      display: flex;
      align-items: center;
      justify-content: center;
      .logo {
        width: 2.2rem;
        height: 1.36rem;
        border-radius: 0.04rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
      .vote {
        min-width: 2rem;
        margin-left: 0.36rem;
        .vote-text {
          font-size: 0.24rem;
          line-height: 0.3rem;
          color: rgba(102, 102, 102, 1);
        }
        .vote-num {
          margin-top: 0.04rem;
          font-size: 0.46rem;
          line-height: 0.5rem;
          font-weight: bold;
          color: rgba(252, 117, 8, 1);
        }
      }
    }
    .company-info-item {
      width: 100%;
      padding: 0 0.8rem;
      display: flex;
      align-items: flex-start;
      .company-info-name {
        font-size: 0.28rem;
        line-height: 0.32rem;
        color: #999;
        vertical-align: top;
      }
      .company-info-content {
        margin-left: 0.28rem;
        font-size: 0.28rem;
        line-height: 0.32rem;
        color: #333;
        width: 3.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .company-info-content-2 {
        margin-left: 0.28rem;
        font-size: 0.28rem;
        line-height: 0.34rem;
        color: #333;
        width: 3.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-line-clamp: 2;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
      }
    }
    .generate-icon {
      width: 3.5rem;
      height: 0.76rem;
      margin: 0 auto;
      z-index: 999;
    }
    .see-btn {
      font-size: 0.24rem;
      color: rgba(255, 174, 56, 1);
      line-height: 0.38rem;
      margin-left: 1.5rem;
      .retract {
        display: inline-block;
        transform: rotate(-90deg);
      }
    }
  }
  .second-top {
    top: 1.57rem;
    background-image: url("./assets/four-to-ten-bg.png");
  }
  .third-top {
    top: 1.18rem;
    background-image: url("./assets/large-ten-bg.png");
  }
  .go-vote {
    width: 1.3rem;
    height: 1.3rem;
    position: absolute;
    bottom: 1.82rem;
    right: 0.26rem;
    z-index: 10;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .company-footer {
    width: 100%;
    max-width: 7.5rem;
    height: 1.5rem;
    background: url("./assets/company-footer-bg.png") center no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    margin: auto;
    display: flex;
    .company-qrcode {
      width: 1.8rem;
      height: 1.8rem;
      background: linear-gradient(
        90deg,
        rgba(243, 215, 146, 1) 0%,
        rgba(237, 190, 95, 1) 100%
      );
      border-radius: 0.08rem;
      margin-left: 1.23rem;
      margin-top: -0.56rem;
      img {
        width: 100%;
        height: 2.06rem;
        padding: 0.12rem 4.6rem 0.38rem 1.36rem;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 3;
      }
    }
    .share-tip {
      margin-top: 0.42rem;
      margin-left: 0.46rem;
      font-size: 0.26rem;
      font-weight: bold;
      color: #ffffff;
    }
  }
  .brand-card-box {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 0 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .close-box {
      text-align: right;
      .card-close {
        width: 0.8rem;
        height: 0.8rem;
      }
    }
    .card-img {
      width: 6rem;
      height: 8.1rem;
    }
    .card-tips {
      font-size: 0.34rem;
      line-height: 0.56rem;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>
<style>
.company-page .vodal-dialog {
  background: transparent;
}
</style>
